<script setup lang="ts">
// 组件参数
const props = withDefaults(
  defineProps<{
    url?: string, // 图标图片资源地址
    size?: number | string, // 图标大小，如果为数字类型则单位默认为 px
  }>(),
  {
    url: "",
    size: 36
  }
);

/**
 * 对通过组件参数传递进来的图标大小进行预处理
 */
const handleSizePre = () => {
  // 如果用于指定图标大小的组件参数的数据类型为 number 则添加默认单位 px
  return typeof props.size === "number" ? props.size + "px" : props.size;
};
</script>

<template>
  <!-- 小尾巴图片图标组件 -->
  <div
    class="st-image-icon"
    :style="{
        width: handleSizePre(),
        height: handleSizePre(),
      }"
  >
    <slot>
      <img class="st-image-icon__img" :src="url" alt="图标">
    </slot>
  </div>
</template>

<style lang="scss" scoped>
// 小尾巴图片图标组件
.st-image-icon {

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
